<template>
	<view class="flexbox">
		<view class="order_image">
			<image :src="ordercardall.goodsMainImgUrl" >
			</image>
		</view>
		<view class="order_text">
			<view class="order_title">
				<view class="order_title_text">{{ordercardall.goodsVarieties}}</view>
				<view class="ordedr_state">
				{{ordercardall.orderStatus===1?'待签字':ordercardall.orderStatus===2?'已签字':ordercardall.orderStatus===3?'拒绝签字':ordercardall.orderStatus===1?'交易成功':'订单失效'}}</view>
			</view>
			<view class="order_details">
				<view class="text_details">单价：{{ordercardall.goodsPrice}}元/斤</view>
				<!-- <view class="text_details">地区：{{ordercardall.address}}</view> -->
				<view class="text_details">创建时间：{{ordercardall.orderCreateTime}}</view>
			</view>
			<view class="order_del">
				<u-button type="error" size="mini" @click="showModal()">删除
				</u-button>
				<u-modal :content="content" v-model="show" showCancelButton buttonReverse @confirm="confirm(index)"
					@cancel="() => show = false">
				</u-modal>
				<!-- <u-popup v-model="show">
					<view></view>
				</u-popup> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '你确定要删除吗？',
			}
		},
		props:['ordercardall'],
		// props: {
		// 	ordercardall: {
		// 		type: Object,
		// 		default: () => {
		// 			return {
		// 				state: '',
		// 				image: '',
		// 				name: '',
		// 				price: '',
		// 				address: '',
		// 				deadline: ''
		// 			}
		// 		}
		// 	}
		// },
		methods: {
			showModal() {
				// console.log(index),
					this.show = true;
			},
			confirm() {
				//点击确定后响应删除
				this.$emit('deleteitem',this.ordercardall.orderUuid);
				// this.order_list.splice(index, 1);
			},
		}
	}
</script>

<style>
	.flexbox {
		display: flex;
		flex-direction: row;
	}

	.order_image {
		float: left;
		width: 160rpx;
		height: 150rpx;
		margin-top: 4%;
		margin-left: 3%;
		border-radius: 16rpx;
	}
	
	.order_image image{
		width: 160rpx;
		height: 180rpx;
		border-radius: 16rpx;
	}
	

	.order_text {
		width: 60%;
		height: 100%;
		float: left;
		margin-left: 5%;
		margin-top: 8rpx;
	}

	.order_title {
		width: 100%;
		height: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-top: 8rpx;
	}

	.order_title_text {
		float: left;
		margin-right: 16rpx;
		margin-top: 1%;
		font-size: 34rpx;
		width: 30%;
		line-height: 180%;
	}

	.ordedr_state {
		width: 30%;
		height: 60%;
		margin-top: 3%;
		margin-left: 75%;
		font-size: 28rpx;
		color: rgba(255, 87, 51, 1);
		z-index: 999;
	}

	.order_details {
		width: 71%;
		height: 45%;
		margin-top: 3%;
		color: rgba(112, 112, 112, 1);
		font-size: 28rpx;
	}

	.text_details {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order_del {
		width: 25%;
		height: 10%;
		margin-top: -8%;
		margin-left: 80%;
		color: rgba(112, 112, 112, 1);
	}
	.order_del{
		z-index: 999;
	}
</style>
